<template>
  <div class="article-detail">
    <div class="container">
      <div class="content">
        <div class="user">
          <img class="user-img" :src="form.member.avatar" alt="">
          <div class="user-info">
            <div class="nickname">{{ form.member.nickname }}</div>
            <div class="time">{{ formatDateTime(form.createTime) }}</div>
          </div>
        </div>

        <div class="title">{{ form.content }}</div>
        <div v-if="form.resourceList.length">
          <img class="bg" v-for="(item, index) in form.resourceList" :key="index" :src="item.url" alt="">
        </div>
        <div class="comment">
          <div class="comment-num">评论{{ total }}</div>
          <div class="comment-list">
            <div class="comment-item" v-for="(item, index) in commentList" :key="index+'_comment'">
              <div class="comment-img">
                <img :src="item.fromUser.avatar" alt="">
              </div>
              <div class="comment-c">
                <div class="comment-name">{{ item.fromUser.nickname }}</div>
                <div class="comment-content">{{ item.content }}</div>
                <div class="comment-time">{{ formatDateTime(item.createTime) }}</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import {getTopicDetail, getTopicCommentList} from '@/api/article'
import {initWechatSDK} from "@/utils/wechat";

export default {
  name: 'TopicDetail',
  data() {
    return {
      product: {},
      showDetail: false,
      showSpecs: false,
      loading: false,
      contentId: this.$route.params.id || null,
      form: {},
      commentList: [],
      total: 0
    }
  },
  mounted() {
    this.getDetail()
    this.getTopicCommentList()
  },
  methods: {
    async getDetail() {
      if (!this.contentId) {
        return
      }
      let data = await getTopicDetail({aid: this.contentId})
      this.form = data.data
      await this.initWechatShare()

      console.log(this.form)
    },
    async getTopicCommentList() {
      let data = await getTopicCommentList({articleId: this.contentId})
      console.log('getTopicCommentList', data)
      this.commentList = data.data.records
      this.total = data.data.total
    },

    async initWechatShare() {
      try {
        await initWechatSDK({
          shareConfig: {
            title: this.form.content,
            desc: '新华新消费',
            link: window.location.href,
            imgUrl: 'https://xinxf.oss-cn-hangzhou.aliyuncs.com/resources/logo.png'
          }
        })
        console.log('微信分享功能已初始化')
      } catch (error) {
        console.error('初始化微信分享失败:', error)
      }
    },

    formatDateTime(inputDateTime) {
      const date = new Date(inputDateTime);
      const month = String(date.getMonth() + 1).padStart(2, '0');
      const day = String(date.getDate()).padStart(2, '0');
      const hours = String(date.getHours()).padStart(2, '0');
      const minutes = String(date.getMinutes()).padStart(2, '0');
      return `${month}.${day} ${hours}:${minutes}`;
    }
  }
}

</script>
<style scoped lang="scss">
.container {
  padding: 10px 14px 14px;

  .content {
    .user {
      display: flex;
      align-items: center;
      margin-bottom: 10px;

      .user-img {
        display: block;
        width: 40px;
        height: 40px;
        margin-right: 8px;
        border-radius: 50%;
      }

      .nickname {
        font-size: 13px;
        color: #333333;
        margin-bottom: 4px;
      }

      .time {
        font-size: 10px;
        color: #7788A0;
      }
    }

    .title {
      color: #333333;
      font-size: 15px;
      line-height: 24px;
      text-align: justify;
      margin-bottom: 12px;
    }

    .bg {
      width: 100%;
      display: block;
      margin-bottom: 12px;
    }

    .comment {
      padding-top: 20px;
      .comment-num{
        font-size: 13px;
        color: #333333;
        margin-bottom: 12px;
      }
      .comment-list {
        .comment-item{
          display: flex;
          .comment-img {
            margin-right: 6px;
            img {
              width: 20px;
              height: 20px;
              border-radius: 50%;
            }
          }
          .comment-c {
            color: #333333;
            font-size: 13px;
            text-align: justify;
            >div {
              margin-bottom: 6px;
            }
            .comment-name {
              font-weight: 600;
            }
            .comment-content {
              font-size: 12px;
            }
            .comment-time {
              color: #7788A0;
              font-size: 10px;
            }
          }
        }
      }
    }
  }


}
</style>